<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
		<view style="background: #fff;" v-show="isLoadingOver">
			<navbar name="分享详情"></navbar>
			<view class="share-title">
				{{result.forumTitle}}
			</view>
			<view class="currentView">
				<view class="userImage">
					<u-lazy-load height="96" border-radius="48" img-mode="aspectFill" :image="result.avatarUrl">
					</u-lazy-load>
				</view>
				<view class="content-view">
					<view class="fans-name ellipsis">
						{{result.nickName}}
					</view>
					<view class="fans-gz">
						{{result.releaseTime}}
					</view>
				</view>
				<view class="attentionView">
					<button v-if="result.userId != userId" class="attention"
						:class="result.followStatus==1?'attentionqg':'attentiongz'" :disabled="disabled" type="default"
						@tap.stop="attentionTap(result.userId,result.followStatus)">{{result.followStatus==1?'取关':'关注'}}</button>
				</view>
			</view>
			<!-- 内容部分 -->
			<view style="width: 640upx;margin-top: 40upx;margin-left: 48upx;">
				<u-parse :html="result.forumContent"></u-parse>
			</view>
			<!-- end -->
			<!-- 收藏 -->
			<view class="share-Boxs">
				<view class=""></view>
				<view class="fenxiang-flex">
					<view class="star-view" @tap.stop="upvoteRecord(forumId,4,result.upvoteFlag)">
						<view class="zan-image">
							<image style="width: 34upx;height: 34upx;"
								:src="result.upvoteFlag ==1?'http://static.bsyjk.cn/redzan/F71FC03DB40545769F73D388CA752067.png':'http://static.bsyjk.cn/zanicon/C5D588B3E16546778A6FBEB624F02F71.png'">
							</image>
						</view>
						<text class="number-box">{{result.upvoteNum}}</text>
					</view>
					<view class="star-view" @tap.stop="collect(forumId,4,1)">
						<view class="zan-image">
							<image style="width: 34upx;height: 34upx;"
								:src="result.collectFlag == 0?'http://static.bsyjk.cn/shouchangccc/4C1ECCC725E345D3A250487C3EC6BFF1.png':'http://static.bsyjk.cn/collecticon/D0EE527757AE451FAD36180E4C4F5753.png'">
							</image>
						</view>
						<text class="number-box">{{result.collectNum}}</text>
					</view>
					<view class="star-view">
						<view class="zan-image">
							<image style="width: 34upx;height: 34upx;"
								src="http://static.bsyjk.cn/l/D5B1AB8C7A5A4AFD9CCCAA7D6012A05B.png"></image>
						</view>
						<text class="number-box">{{result.shareNum}}</text>
						<button class="openChat" open-type="share"></button>
					</view>

					<view class="star-view" v-if="result.userId == thisuserid" @tap.stop="deleteForum()">
						<view class="zan-image" style="margin-right: 10upx;">
							<image style="width: 34upx;height: 34upx;"
								src="http://static.bsyjk.cn/l/00DEFB77227048C99ECA2910AF17F368.png"></image>
						</view>
						<view class="">
							删除
						</view>
					</view>
				</view>
			</view>
			<view style="width: 750upx;height: 2upx;margin: 0 auto;background: #f5f5f5;">

			</view>
			<!-- 删除-->
			<view class="w685">
				<view class="userComment-title">
					用户评论
				</view>
				<block v-for="(item,idx) in plRecords" :key="idx">
					<view class="user-flexm" @tap="commentTap(1)">
						<view class="flexm-image">
							<u-lazy-load width="90" height="90" border-radius="50" img-mode="aspectFill" :image="item.avatarUrl">
							</u-lazy-load>
						</view>
						<view class="flexm-name">
							{{item.nickName}}
						</view>
						<view class="flexm-zan" @tap.stop="upvoteRecord(item.commentId,5,item.upvoteFlag)">
							<image class="zan-image"
								:src="item.upvoteFlag ==1?'http://static.bsyjk.cn/redzan/F71FC03DB40545769F73D388CA752067.png':'http://static.bsyjk.cn/zanicon/C5D588B3E16546778A6FBEB624F02F71.png'">
							</image>
							<text  :class="item.upvoteFlag ==1?'fffcolor':'redcolor'">{{item.upvoteNum?item.upvoteNum:'赞'}}</text>
						</view>
					</view>
					<view class="comment">
						{{item.content}}
					</view>
					<view class="comment-time" @tap.stop="commentTap(item.nickName,item,'')">
						{{item.commentTime}}·回复
					</view>
					<view class="comment-reply" v-for="(items,idxs) in item.replyVOS" :key="idxs">
						<view class="zuozhe-view">
							<view class="user-imagepl">
								<u-lazy-load height="44" border-radius="50" img-mode="aspectFill"
									:image="items.avatarUrl">
								</u-lazy-load>
							</view>
							<view class="user-namepl">
								<text :class="result.userId == items.userId?'is-zuozhe':''">{{items.nickName}}</text>
							</view>
							<view class="pl-zan" @tap.stop="upvoteRecord(items.replyId,6,items.upvoteNum)">
								<text
									:class="items.upvoteFlag?'is-zanicon':'no-zanicon'">
									{{items.upvoteNum?items.upvoteNum:'赞'}}
									</text>
							</view>
						</view>
						<view class="huifu-huifu">
							<text style="color: #3BAEEB;"
								v-if="items.pid !==0">回复@{{items.toNickName}}：</text>{{items.replyContent}}
						</view>
						<!-- <view class="quanwen-text">
							全文
						</view> -->
						<view class="huifue-time" @tap.stop="commentTap(items.nickName,item,items)">
							<!-- 2021-03-12 11:09 ·回复 -->
							{{items.replyTime}}·回复
						</view>

					</view>
					<view v-show="item.total>3" class="zhankai-hf" @tap.stop="unfold(item.commentId,idx,item.total)">
						<!-- {{item.replyVOS.length}} -->
						<text class="zijijian" v-if="item.replyVOS.length == 3">展开{{item.total}}条回复</text>
						<text class="zijijian"
							v-if="item.replyVOS.length>3 && item.replyVOS.length<item.total">查看更多</text>
						<text class="zijijian" v-if="item.replyVOS.length==item.total">暂无更多</text>
					</view>
				<view style="width: 100%;background: #f5f5f5;height: 2upx;margin-top:35upx;">
				</view>
				</block>
			</view>
			<view class="huifu-view">
				<input class="huifu-input" :class="true?'huifu-inputb':''" type="text" @input="inputGet"
					v-model="plContent" :placeholder="placeholder" />
				<button class="publish" type="default" :disabled="disabled" @tap.stop="publishTab()">发表</button>
			</view>
			<view style="height: 300upx;">
			</view>
			<!-- 健康豆 -->
			<view class="accomplish-popup" v-show="addBean">
				完成任务 <image class="jkdimage"
					src="http://static.bsyjk.cn/fitness/37914A67E286429B99EF67FDE1D3F192.png" mode="健康豆"></image>
				+{{givePoint}}
			</view>
		</view>

		<view class="loading-box">
			<u-loading :show="loadinglou" color="#41ADBA" size="70"></u-loading>
		</view>

	</view>
</template>

<script>
import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"
import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue"
import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"
import uParse from "@/uview-ui/components/u-parse/u-parse.vue"
import uSearch from "@/uview-ui/components/u-search/u-search.vue"
import uTabs from "@/uview-ui/components/u-tabs/u-tabs.vue"
import uPopup from "@/uview-ui/components/u-popup/u-popup.vue"
	export default {
		components: {
			uLazyLoad,
			uLoading,
			uParse,
		
		},
		data() {
			return {
				index:'',//外部列表index
				type:'',//左侧还是右侧
				pointDict: '', //评论id
				userId: '', //用户id
				disabled: false,
				upPage: '', //上一个页面
				loadingone: false, //懒加载动画
				task: '',
				stepId: '',
				givePoint: '',
				addBean: false,
				commentId: '', //主键id
				pid: '', //回复主id
				placeholder: '写点什么评论',
				plContent: '',
				plRecords: [], //评论数组
				pageCurrent: '',
				pageSize: '',
				forumId: '', //文章id
				thisuserid: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId,
				result: '', //this文章详情
				newFansList: {
					userimg: '',
					name: '虾条的李奶奶',
					content: '我也是这样的',
					time: '评论了你的分享  刚刚',
					articleImg: '',
					isAttention: true
				},
				isLoadingOver: false, //是否已经加载完
				loadinglou: false, //发送评论loading
				pageCurrent: 1, //当前页数
				pageSize: 20, //每页记录条数
				allpages: '', //总页数
				is_pull: false, //是否在上拉加载  默认false
				isNodata: false, //是否没有数据
				total: 0, //Z数据总条数

				//二级评论
				commentId: '', //二级评论的id
				erPages: '', //二级页面的 页数
				erNewPage: '', //二级评论当前页




			}
		},
		onLoad(e) {
			console.log(e,'2222222222222222222')
			this.pointDict = e.pointDict ? e.pointDict : '';
			this.upPage = e.page ? e.page : '';
			this.task = e.task ? e.task : '';
			this.stepId = e.stepId ? e.stepId : '';
			this.givePoint = e.givePoint ? e.givePoint : '';
			this.userId = uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId; //用户id
			let forumId = e.forumId;
			this.forumId = forumId; //赋值文章id
			this.index = e.index;
			this.type = e.type;
			uni.setStorageSync('forumId', forumId)
			this.forum(forumId); //获取文章列表
			this.commentFx() //获取评论列表
			// 配置分享
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},

		//上拉加载
		onReachBottom() {
			//判断总页数是否大于1
			if (this.allpages > 1) {
				//判断当前是否处于上拉加载中
				if (this.is_pull == false) {
					//判断当前页是否小于总页数
					if (this.pageCurrent < this.allpages) {
						this.is_pull = true; //激活上拉状态
						// this.loadings = true;
						this.loadingone = true;
						this.pageCurrent++; //当前页数加1
						this.commentFxUp(); //获取评论列表
					} else {
						this.$message.info('暂无更多数据');
					}
				}
			}
		},
		methods: {
			upvoteRecord(id, upvoteRecord, ispd) {
				let fdata = {
						topicType: upvoteRecord,
						topicId: id //主题id
					},
					_this = this;
				console.log(id, upvoteRecord, ispd, 1855555555)
				if (ispd == 0) {
					this.$cms.post(global.apiUrls.upvoteRecord, fdata).then(res => {
						if (res.data.code == 1000) {
							if (upvoteRecord == 4) { //帖子刷新
								_this.forum(_this.forumId,'postLike');
							} else { //评论刷新
								_this.commentFx()
							}
						}
					})
				} else {
					this.$cms.delete(global.apiUrls.upvoteRecord, fdata).then(res => {
						if (res.data.code == 1000) {
							if (upvoteRecord == 4) { //帖子
								_this.forum(_this.forumId,'postLike');
							} else { //评论刷新
								_this.commentFx()
							}
						}
					})
				}

			},
			reply(commentId, pid, replyContent) {
				let fdata = {
						commentId: commentId,
						pid: pid,
						replyContent: replyContent,
					},
					_this = this;
				_this.disabled = true;
				// cms
				_this.loadinglou = true;
				_this.$cms.post(global.apiUrls.reply, fdata).then(res => {
					if (res.data.code == 1000) {
						_this.commentFx();
						_this.loadinglou = false;
						_this.plContent = '';
					} else {
						_this.loadinglou = false;
						_this.plContent = '';
					}
					_this.disabled = false;
				})

			},
			unfold(commentId, idx, total) {
				let _this = this;

				if (this.commentId == commentId) {
					//判断总页数是否大于1
					if (_this.erPages > 1) {
						//判断当前是否处于上拉加载中
						if (_this.is_pull == false) {
							//判断当前页是否小于总页数
							if (_this.erNewPage < this.erPages) {
								_this.is_pull = true; //激活上拉状态
								_this.loadingone = true;
								_this.erNewPage++; //当前页数加1
								this.secondLevelUp(idx); //获取评论列表
							} else {
								this.$message.info('暂无更多数据');
							}
						}
					}
				} else {
					this.commentId = commentId; //赋值当前二级分页的id
					this.erPages = Math.ceil(total / 3); //计算页数
					this.erNewPage = 2; //当前页
					this.secondLevelUp(idx); //获取评论列表
				}


			},
			//二级评论上拉加载
			secondLevelUp(idx) {
				this.is_pull = true; //激活上拉状态
				let _this = this;
				this.$cms.get(global.apiUrls.reply, {
						commentId: this.commentId, //二级评论id
						pageCurrent: this.erNewPage, //评论页数
						pageSize: 3, //评论条数
						userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					})
					.then(res => {
						if (res.data.code == 1000) {
							let plRecords = _this.plRecords;



							plRecords[idx].replyVOS = plRecords[idx].replyVOS.concat(res.data.result.records)
							// _this.plRecords = plRecords
							this.is_pull = false; //激活上拉状态
							this.loadingone = false;

						}
					})
			},

			commentTap(name, item, items) {
				if (name == 1) {
					this.placeholder = '写点什么评论';
					this.plContent = ''
				} else {
					console.log(item, items)
					this.placeholder = '回复:' + name;
					this.plContent = '';
					this.commentId = item.commentId;
					this.pid = items ? items.replyId : 0

				}
			},
			inputGet(e) {
				this.plContent = e.detail.value;
			},
			userPointRecord(taskStepId) { //我的页面
				let fdata = {
					userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId,
					pointDict: taskStepId,
				}
				let _this = this;
				this.$shopnew.post(global.apiUrls.userPointRecord, fdata)
					.then(res => {
						if (res.data.code == 1000) {
							_this.addBean = true //显示添加健康豆
							setTimeout(() => {
								_this.addBean = false //显示添加健康豆
							}, 1500);
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					}).catch(err => {})
			},
			userTaskStep(taskStepId) {
				let _this = this;
				let fdata = {
					userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId,
					userStepId: taskStepId,
					taskAppendix: ''
				}
				this.$api.put(global.apiUrls.userTaskStep, fdata)
					.then(res => {
						if (res.data.code == 1000) {
							_this.addBean = true //显示添加健康豆
							setTimeout(() => {
								_this.addBean = false //显示添加健康豆
							}, 1500);
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					}).catch(err => {})
			},
			publishTab() {
				if (this.placeholder == '写点什么评论') {
					let _this = this;
					_this.disabled = true;
					let fdata = {
						content: this.plContent,
						forumId: this.forumId,
						userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					}
					this.loadinglou = true;
					// cms
					_this.$cms.post(global.apiUrls.commentFx, fdata).then(res => {
						_this.disabled = false;
						if (res.data.code == 1000) {
							uni.showToast({
								title: '评论成功',
								duration: 2000
							});
							_this.plContent = '';
							_this.commentFx();
							this.loadinglou = false;
							// console.log(_this.task,_this.upPage,_this.task == '0' && _this.upPage == '','45222222222222222222')
							if (_this.task == '0' && _this.upPage == '') { //来自首页
								// _this.userTaskStep(_this.stepId);
							} else if (_this.task == '0' && _this.upPage == 'healthBeans') { //来自我的
								_this.userPointRecord(_this.pointDict);
							}

						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
							this.loadinglou = false;
						}
					})
				} else {
					let commentId = this.commentId,
						pid = this.pid,

						replyContent = this.plContent;
					this.reply(commentId, pid, replyContent)
				}
			},
			// 删除帖子
			deleteForum(id) {
				let _this = this;
				this.$cms.delete(global.apiUrls.forum+'/'+this.forumId, {}).then(res => {
					if (res.data.code == 1000) {
						uni.showToast({
							title: '删除成功',
							duration: 2000
						});
						uni.$emit('toUpdateFabulous',{
							type:_this.type,
							index:_this.index,
							deleteForum:true
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							});
						},2000)
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
					}
				})
			},
			// 首次进入获取评论信息
			commentFx() {
				let _this = this;
				this.$cms.get(global.apiUrls.commentFx, {
					forumId: _this.forumId,
					pageCurrent: 1,
					pageSize: this.pageSize
				}).then(res => {
					if (res.data.code == 1000) {
						this.plRecords = res.data.result.records; //数据赋值
						_this.allpages = res.data.result.pages; //总也数
						this.is_pull = false; //上拉加载动作结束
						this.isLoadingOver = true; //已将加载完
						this.loadingone = false; //首次进入页面加载动画结束
						_this.total = res.data.result.total; //赋值总条数
						if (res.data.result.total == 0) {
							this.nodata = true;
						}
					} else {
						this.loadingone = false;
						this.is_pull = false; //上拉加载动作结束
						this.$message.info(res.data.msg); //获取数据失败弹框
					}
				})
			},
			//上拉加载走这个
			commentFxUp() {
				let _this = this;
				this.$cms.get(global.apiUrls.commentFx, {
					forumId: _this.forumId,
					pageCurrent: this.pageCurrent,
					pageSize: this.pageSize
				}).then(res => {
					if (res.data.code == 1000) {
						this.plRecords = [...this.plRecords, ...res.data.result.records]; //数据赋值
						_this.allpages = res.data.result.pages; //总也数
						this.loadingone = false; //首次进入页面加载动画结束
						this.is_pull = false; //上拉加载动作结束
						_this.total = res.data.result.total; //赋值总条数
						if (res.data.result.total == 0) {
							this.nodata = true;
						}
					} else {
						this.loadingone = false;
						this.is_pull = false; //上拉加载动作结束
						this.$message.info(res.data.msg); //获取数据失败弹框
					}
				})
			},


			collect(topicId, topicType, userSource) {
				let _this = this;
				let fdata = {
					topicId: topicId,
					topicType: topicType,
					userSource: userSource,
					userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
				}
				if (this.result.collectFlag == 0) {
					this.$cms.post(global.apiUrls.collect, fdata).then(res => {
						if (res.data.code == 1000) {
							uni.showToast({
								title: '收藏成功',
								duration: 2000
							});
							_this.forum(_this.forumId)
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					})
				} else {
					this.$cms.delete(global.apiUrls.collect, fdata).then(res => {
						if (res.data.code == 1000) {
							uni.showToast({
								title: '取消收藏',
								duration: 2000
							});
							_this.forum(_this.forumId)
						} else {
							uni.showToast({
								title: res.data.message,
								icon: "none",
								duration: 2000
							});
						}
					})
				}

			},
			attentionTap(id, type) {
				if (type == 1) {
					this.deleteFollow(id)
				} else {
					this.follow(id)
				}
			},
			deleteFollow(id) {
				let _this = this,
					fdata = {
						followedId: id, //被关注id
						userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					};
				_this.disabled = true;
				this.$cms.delete(global.apiUrls.follow, fdata).then(res => {
					if (res.data.code == 1000) {
						uni.showToast({
							title: '取关成功',
							duration: 2000
						});
						_this.forum(_this.forumId);
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
					}
					_this.disabled = false;
				})
			},
			follow(id) {
				let _this = this,
					fdata = {
						followedId: id, //被关注id
						userId: uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId
					};
				_this.disabled = true;
				this.$cms.post(global.apiUrls.follow, fdata).then(res => {
					if (res.data.code == 1000) {
						uni.showToast({
							title: '关注成功',
							duration: 2000
						});
						_this.forum(_this.forumId);
					} else {
						uni.showToast({
							title: res.data.message,
							icon: "none",
							duration: 2000
						});
					}
					_this.disabled = false;
				})
			},
			forum(id,type) { //获取文章列表
				this.loadingone = true;
				let _this = this;
				this.$cms.get(global.apiUrls.forumDetail + '/' + id + '?userId=' +
					uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId, {}).then(res => {
					if (res.data.code == 1000) {
						if(type == 'postLike'){//帖子赞
							uni.$emit('toUpdateFabulous',{
								type:_this.type,
								index:_this.index,
								upvoteNum:res.data.result.upvoteNum
							})
						}
						_this.result = res.data.result;
					} else if (res.data.code == 3006) {
						let title = '分享已被删除'
						uni.showToast({
							title: title,
							icon: 'none',
							duration: 2000
						});
					}
					_this.loadingone = false;
				})

			},
			//发送给朋友
			onShareAppMessage(res) {
				// 此处的distSource为分享者的部分信息，需要传递给其他人
				if (distSource == 'InviteYourFamily') {
					return {
						title: '百岁园健康',
						type: 0,
						path: 'pages/subpackage/find/share/share?forumId=' + uni.getStorageSync('forumId'),
						summary: "为了让你更健康，我想邀请你关联家人健康，让我每天为你守护",
						imageUrl: "https://58d.oss-cn-hangzhou.aliyuncs.com/goods/ttg_1596073788000.png"
					}
				}
			},
			// onReachBottom : function() { //分页加载
			// 	let pageCurrent= this.pageCurrent += 1,
			// 	pageSize = this.pageSize += 10;
			// 	this.commentFx(this.forumId, pageCurrent, pageSize)
			// },
		}
	}
</script>

<style lang="scss">
	.share-Boxs {
		width: 750upx;
		height: 108upx;
		padding: 36upx 48upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #999999;
	}

	.fenxiang-flex {
		display: flex;
		.number-box {
			margin: 0 20rpx 0 10rpx;
		}
		.star-view {
			margin-left: 20upx;
			position: relative;
			display: flex;
			align-items: center;
			float: left;
			.zan-image {
				width: 34upx;
				height: 34upx;
				float: left;
			}

			.openChat {
				top: 0;
				left: 0;
				position: absolute;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 999;
			}

		}
	}

	.share-title {
		width: 654upx;
		margin: 28upx auto 17upx;
		font-size: 54upx;
		font-weight: 500;
		color: #333333;
		line-height: 75upx;
	}

	.currentView {
		margin-top: 30upx;
		margin-left: 48upx;
		display: flex;

		.userImage {
			width: 96upx;
			height: 96upx;
			margin-right: 19upx;
		}

		.content-view {
			width: 450upx;
			font-size: 26upx;
			color: #9B9B9B;

			.fans-name {
				padding: 11upx 0;
				color: #333333;
			}

			.fans-gz {
				font-size: 24upx;
			}

			.usetname-text {
				font-weight: 500;
				color: #333333;
				line-height: 37upx;
			}

			.news-time {
				font-size: 20upx;
			}
		}

		.articleImg {
			width: 100upx;
			height: 100upx;
			margin-left: 20upx;
		}

		.attentionView {
			width: 130upx;

			.attention {
				margin: 20upx 0 0;
				width: 130upx;
				height: 50upx;
				border-radius: 13upx;
				font-size: 24upx;
				font-weight: 500;
				line-height: 50upx;
				padding: 0;
				color: #FFFFFF;
			}

			.attentiongz {
				background: #FF930A;
				border: 2upx solid #FF930A;
			}

			.attentionqg {
				background: #f5f5f5;
				color: #303133;
			}
		}
	}

	.w685 {
		width: 685upx;
		margin: 0 auto;
	}

	.userComment-title {
		font-size: 34upx;
		font-weight: 500;
		color: #333333;
		line-height: 48upx;
		padding: 42upx 0 10upx;
	}

	.user-flexm {
		height: 90upx;
		margin-top: 29upx;
		display: flex;

		.flexm-image {
			width: 90upx;
			height: 90upx;
		}
		.flexm-name {
			width: 456upx;
			height: 90upx;
			font-size: 30upx;
			font-weight: 400;
			color: #999999;
			line-height: 90upx;
			padding-left: 13upx;
		}

		.flexm-zan {
			width: 140upx;
			height: 90upx;
			line-height: 90upx;
			text-align: right;
			color: #999999;
			.zan-image {
				width: 40upx;
				height: 40upx;
				margin: 24upx 10upx 0 0;
				vertical-align:-4upx;
				// background: url(http://static.bsyjk.cn/zanicon/C5D588B3E16546778A6FBEB624F02F71.png)no-repeat;
				// background-size: 38upx 36upx;
			}
		}
	}

	.comment {
		width: 560upx;
		font-size: 34upx;
		font-weight: 500;
		color: #333333;
		line-height: 48upx;
		margin-left: 100upx;
	}

	.comment-time {
		font-size: 24upx;
		font-weight: 400;
		color: #999999;
		line-height: 33upx;
		margin: 14upx 0 0 100upx;
	}

	.zhankai-hf {
		font-size: 24upx;
		font-weight: 400;
		color: #999999;
		line-height: 33upx;
		padding: 20upx 0 0 142upx;

		.zijijian {
			position: relative;
		}

		.zijijian:before {
			content: '';
			width: 27upx;
			height: 16upx;
			position: absolute;
			background: url(http://static.bsyjk.cn/xiajiantou/1E730EEF79654E04A8F2D7EBF1E4F211.png)no-repeat;
			background-size: 27upx 16upx;
			right: -32upx;
			top: 8upx;
		}
	}

	.comment-reply {
		width: 580upx;
		margin-left: 100upx;

		.quanwen-text {
			font-size: 24upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #F56767;
			line-height: 33upx;
			padding: 0 0 20upx 50upx;
		}

		.huifu-huifu {
			font-size: 34upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 48upx;
			padding: 0 0 14upx 50upx;
		}



		.huifue-time {
			font-size: 24upx;
			font-weight: 400;
			color: #999999;
			line-height: 33upx;
			padding-left: 50upx;
		}

		.zuozhe-view {
			width: 100%;
			height: 94upx;
			display: flex;

			.user-imagepl {
				width: 44upx;
				height: 44upx;
				margin: 24upx 10upx 0 0;
			}

			.user-namepl {
				width: 420upx;
				font-size: 30upx;
				font-weight: 400;
				color: #999999;
				line-height: 94upx;
			}

			.is-zuozhe {
				position: relative;
			}

			.is-zuozhe:before {
				content: '作者';
				width: 67upx;
				height: 31upx;
				background: #F56767;
				border-radius: 5upx;
				position: absolute;
				right: -70upx;
				top: 4upx;
				font-size: 22upx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 31upx;
				text-align: center;

			}

			.pl-zan {
				width: 120upx;
				text-align: right;
				font-size: 30upx;
				font-weight: 400;
				color: #999999;
				line-height: 94upx;

				.is-zanicon,
				.no-zanicon {
					position: relative;
				}

				.is-zanicon:before {
					content: '';
					position: absolute;
					top: 0;
					left: -50upx;
					width: 40upx;
					height: 40upx;
					background: url(http://static.bsyjk.cn/redzan/F71FC03DB40545769F73D388CA752067.png)no-repeat;
					background-size: 100% 100%;
				}

				.no-zanicon:before {
					content: '';
					position: absolute;
					top: 0;
					left: -50upx;
					width: 40upx;
					height: 40upx;
					background: url(http://static.bsyjk.cn/zanicon/C5D588B3E16546778A6FBEB624F02F71.png)no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}

	.BeganToPlan {
		width: 655upx;
		height: 90upx;
		background: linear-gradient(112deg, #81C042 0%, #2EA7E0 100%);
		border-radius: 45upx;
		color: #fff;
		margin: 30upx auto;
	}

	.huifu-view {
		width: 750upx;
		height: 120upx;
		background: #FFFFFF;
		box-shadow: 0upx -3upx 8upx -4upx rgba(0, 0, 0, 0.16);
		position: fixed;
		bottom: 0;
		display: flex;

		.huifu-input {
			width: 552upx;
			height: 71upx;
			background: #F5F5F5;
			border-radius: 30upx;
			position: relative;
			margin: 25upx 12upx 0 32upx;
			font-size: 24upx;
			font-weight: 400;
			color: #9B9B9B;
			line-height: 33upx;
			padding-left: 60upx;
			box-sizing: border-box;
		}

		.huifu-inputb {
			position: relative;
		}

		.huifu-inputb::before {
			content: '';
			width: 33upx;
			height: 33upx;
			position: absolute;
			top: 18upx;
			left: 20upx;
			background: url(http://static.bsyjk.cn/import/8D7C45B5CAB14E2E8C883850914B56D0.png)no-repeat;
			background-size: 33upx 33upx;
		}

		.publish {
			width: 124upx;
			height: 64upx;
			background: #2EA7E0;
			border-radius: 13upx;
			font-size: 30upx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 64upx;
			margin-top: 29upx;
		}
	}

	.lockView {
		width: 50upx;
		height: 28upx;
		background: #C0C4CC;
		float: left;
		margin-top: 4upx;
		background: url(http://static.bsyjk.cn/seeIcon/37C6382B372045CCB803A7F2DE1D24EA.png)no-repeat;
		background-size: 44upx 28upx;
	}

	.followStatusF {
		width: 33upx;
		height: 32upx;
		background: url(http://static.bsyjk.cn/shouchangccc/4C1ECCC725E345D3A250487C3EC6BFF1.png)no-repeat;
		background-size: 33upx 32upx;
	}

	.followStatusT {
		width: 33upx;
		height: 32upx;
		background: url(http://static.bsyjk.cn/collecticon/D0EE527757AE451FAD36180E4C4F5753.png)no-repeat;
		background-size: 33upx 32upx;
	}

	.lockView2,
	.lockView3 {
		width: 37upx;
		height: 37upx;
		background: url(http://static.bsyjk.cn/l/D5B1AB8C7A5A4AFD9CCCAA7D6012A05B.png)no-repeat;
		background-size: 37upx 37upx;
		float: left;
		margin: 2upx 10upx 0 0;
	}

	.lockView3 {
		background: url(http://static.bsyjk.cn/deleteicon/264FED93C8CB42BDA0B1E98452A5B7AA.png)no-repeat;
		background-size: 37upx 37upx;
	}
</style>
